<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>John Test Page</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/resources/dojo.css" rel="stylesheet" type="text/css" /> 
    <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dijit/themes/tundra/tundra.css" rel="stylesheet" type="text/css" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body class="tundra"> 

<div id="checkContainer" style="margin:10px;">
</div>
<div id="checkState" style="margin:10px;">
</div>
<div id="checkText" style="margin:10px;">
</div>

<div id="checkContainer2" style="margin:10px;">
</div>

<script type="text/javascript" src="//www.google.com/jsapi"></script> 
<script type="text/javascript">//<![CDATA[
    djConfig={
        parseOnLoad: false,
        isDebug: false,
        baseUrl: "./",
        modulePaths: { hp: "script/hp" }
    };

    google.load("dojo", "1.4.3");
//]]></script> 
<script type="text/javascript">//<![CDATA[
    dojo.require('hp.iPhoneButton');
    var example = {
        node:null,
        node1:null,
        load:function(){
            this.node = new hp.iPhoneButton({id:"checkbox",onText:"ON",offText:"OFF",width:200,animateSpeed:200,startOn:false});
            dojo.place(this.node.domNode,dojo.byId('checkContainer'));
            dojo.connect(this.node,'onClick',this,function(evt){
            });
            dojo.connect(this.node,'onChange',this,function(evt){
                dojo.byId('checkState').innerHTML = this.node.attr('value');
                dojo.byId('checkText').innerHTML = this.node.attr('curText');
                console.log('fired onChange');
            });
            this.node1 = new hp.iPhoneButton({id:"checkbox2",onText:"ON",offText:"OFF",width:89,animateSpeed:200,startOn:false});
            dojo.place(this.node1.domNode,dojo.byId('checkContainer2'));
        }
    }
    dojo.ready(function(evt){
        example.load();
    });
//]]></script> 
</body> 
</html> 
